<template>
  <div class="socialReport">
    <ReportList :date="yearMonth" :dis-show="true" :tab-name="'社保列表'" :cancel="true" @guiDang="openGuiDang" @newReport="newReport" @btnCancel="$router.back()" @exportExcel="exportExcel">
      <template #head>
        <span />
      </template>
      <template #table>
        <el-table
          :data="socialtableData"
          style="width: 100%"
          max-height="500"
          border
        >
          <el-table-column
            label="序号"
            type="index"
            width="50"
          />
          <el-table-column
            prop="username"
            label="姓名"
            width="150"
          />
          <el-table-column
            prop="timeOfEntry"
            label="入职时间"
            width="150"
          />
          <el-table-column
            prop="mobile"
            label="手机号"
            width="150"
          />
          <el-table-column
            prop="idNumber"
            label="身份证号码"
            width="200"
          />
          <el-table-column
            prop="theHighestDegreeOfEducation"
            label="学历"
            width="200"
          />
          <el-table-column
            prop="openingBank"
            label="开户行"
            width="200"
          />
          <el-table-column
            prop="departmentName"
            label="一级部门"
            width="200"
          />
          <el-table-column
            prop="departmentName"
            label="二级部门"
            width="200"
          />
          <el-table-column
            prop="workingCity"
            label="工作城市"
            width="200"
          />
          <el-table-column
            prop="socialSecurityComputerNumber"
            label="社保电脑号"
            width="200"
          />
          <el-table-column
            prop="providentFundAccount"
            label="公积金账号"
            width="200"
          />
          <el-table-column
            prop="leaveDate"
            label="离职时间"
            width="200"
          />
          <el-table-column
            prop="householdRegistrationType"
            label="户籍类型"
            width="200"
          />
          <el-table-column
            prop="participatingInTheCity"
            label="参保城市"
            width="150"
          />
          <el-table-column
            prop="socialSecurityMonth"
            label="社保月份"
            width="150"
          />
          <el-table-column
            prop="socialSecurityBase"
            label="社保基数"
            width="150"
          />
          <el-table-column
            prop="socialSecurity"
            label="社保合计"
            width="150"
          />
          <el-table-column
            prop="socialSecurityEnterprise"
            label="社保企业"
            width="150"
          />
          <el-table-column
            prop="socialSecurityIndividual"
            label="社保个人"
            width="150"
          />
          <el-table-column
            prop="providentFundCity"
            label="公积金城市"
            width="150"
          />
          <el-table-column
            prop="providentFundMonth"
            label="公积金月份"
            width="150"
          />
          <el-table-column
            prop="accumulationFundEnterpriseBase"
            label="公积金企业基数"
            width="150"
          />
          <el-table-column
            prop="proportionOfProvidentFundEnterprises"
            label="公积金企业比例"
            width="150"
          />
          <el-table-column
            prop="individualBaseOfProvidentFund"
            label="公积金个人基数"
            width="150"
          />
          <el-table-column
            prop="personalRatioOfProvidentFund"
            label="公积金个人比例"
            width="150"
          />
          <el-table-column
            prop="totalProvidentFund"
            label="公积金合计"
            width="150"
          />
          <el-table-column
            prop="providentFundEnterprises"
            label="公积金企业"
            width="150"
          />
          <el-table-column
            prop="providentFundIndividual"
            label="公积金个人"
            width="150"
          />
          <el-table-column
            prop="pensionEnterpriseBase"
            label="养老企业基数"
            width="150"
          />
          <el-table-column
            prop="proportionOfPensionEnterprises"
            label="养老企业比例"
            width="150"
          />
          <el-table-column
            prop="pensionEnterprise"
            label="养老企业"
            width="150"
          />
          <el-table-column
            prop="personalPensionBase"
            label="养老个人基数"
            width="150"
          />
          <el-table-column
            prop="personalPensionRatio"
            label="养老个人比例"
            width="150"
          />
          <el-table-column
            prop="oldAgeIndividual"
            label="养老个人"
            width="150"
          />
          <el-table-column
            prop="percentageOfUnemployedIndividuals"
            label="失业个人比例"
            width="150"
          />
          <el-table-column
            prop="unemployedIndividual"
            label="失业个人"
            width="150"
          />
          <el-table-column
            prop="medicalEnterpriseBase"
            label="医疗企业基数"
            width="150"
          />
          <el-table-column
            prop="proportionOfMedicalEnterprises"
            label="医疗企业比例"
            width="150"
          />
          <el-table-column
            prop="medicalEnterprise"
            label="医疗企业"
            width="150"
          />
          <el-table-column
            prop="medicalPersonalBase"
            label="医疗个人基数"
            width="150"
          />
          <el-table-column
            prop="medicalPersonalRatio"
            label="医疗个人比例"
            width="150"
          />
          <el-table-column
            prop="medicalIndividual"
            label="医疗个人"
            width="150"
          />
          <el-table-column
            prop="baseOfIndustrialInjuryEnterprises"
            label="工伤企业基数"
            width="150"
          />
          <el-table-column
            prop="proportionOfIndustrialInjuryEnterprises"
            label="工伤企业比例"
            width="150"
          />
          <el-table-column
            prop="industrialInjuryEnterprise"
            label="工伤企业"
            width="150"
          />
          <el-table-column
            prop="proportionOfFertilityEnterprises"
            label="生育企业比例"
            width="150"
          />
          <el-table-column
            prop="childbearingEnterprise"
            label="生育企业"
            width="150"
          />
          <el-table-column
            prop="baseOfSeriousIllness"
            label="大病企业基数"
            width="150"
          />
          <el-table-column
            prop="baseOfSeriousIllness"
            label="大病企业比例"
            width="150"
          />
          <el-table-column
            prop="bigDiseaseEnterprise"
            label="大病企业"
            width="150"
          />
          <el-table-column
            prop="personalBaseOfSeriousIllness"
            label="大病个人基数"
            width="150"
          />
          <el-table-column
            prop="personalProportionOfSeriousIllness"
            label="大病个人比例"
            width="150"
          />
          <el-table-column
            prop="personalBaseOfSeriousIllness"
            label="大病个人"
            width="150"
          />
          <el-table-column
            prop="providentFundNotes"
            label="公积金备注"
            width="150"
          />
          <el-table-column
            prop="socialSecurityNotes"
            label="社保备注"
            width="150"
          />

        </el-table>
      </template>
    </ReportList>

  </div>
</template>

<script>
import { getSecurityMouthList, PostSocialAchieve, SetSocialAchieve, getSocialSettings } from '@/api/social'
export default {
  data() {
    return {
      socialtableData: [],
      yearMonth: this.$route.query.yearMonth,
      showDialog: false
    }
  },
  async created() {
    this.getTableData()
  },
  methods: {
    //   渲染列表
    async getTableData() {
      console.log(this.$route)
      const params = { yearMonth: '202209', opType: 2 }
      const res = await getSecurityMouthList(params)
      this.socialtableData = res
      // 改造入职时间
      this.socialtableData.map(data => {
        data.timeOfEntry = data.timeOfEntry.split('T')[0]
      })
    },
    //   归档功能
    openGuiDang() {
      this.$confirm('您确认归档当月报表吗？(报表归档将覆盖上一次归档记录，无法恢复)?', `归档${this.yearMonth}报表`, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(async() => {
        //   发送归档请求
        await PostSocialAchieve(this.yearMonth)
        this.$message({
          type: 'success',
          message: '操作成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    // 新建列表
    newReport() {
      this.$confirm(`您将创建 《 ${this.yearMonth.slice(0, 4)}年${this.yearMonth.slice(4, 6)}月 》 报表`, `提示`, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(async() => {
        //   发送归档请求
        await SetSocialAchieve(this.yearMonth)
        await this.getSocialSettings()
        this.$message({
          type: 'success',
          message: '操作成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    // 获取 最新月份
    async getSocialSettings() {
      const res = await getSocialSettings()
      this.$route.query.dataMonth = res.dataMonth
      this.getTableData()
    },
    // 点击导出
    async  exportExcel() {
    // 这里是按钮被点击, 可以就在这里单独引入需要的库
      const { export_json_to_excel } = await import('@/vendor/Export2Excel')

      const params = { yearMonth: this.yearMonth, opType: 2 }
      const res = await getSecurityMouthList(params)
      // console.log(res)
      const dict = {
        '公积金企业基数': 'accumulationFundEnterpriseBase',
        '归档id': 'archiveId',
        '银行卡号': 'bankCardNumber',
        '工伤企业基数': 'baseOfIndustrialInjuryEnterprises',
        '大病企业基数': 'baseOfSeriousIllness',
        '大病企业': 'bigDiseaseEnterprise',
        '生育企业': 'childbearingEnterprise',
        '生育企业基数': 'fertilityEnterpriseBase',
        '一级部门': 'firstLevelDepartment',
        '户籍类型': 'householdRegistrationType',
        'id': 'id',
        '身份证号': 'idNumber	',
        '公积金个人基数	': 'individualBaseOfProvidentFund',
        '工伤企业	': 'industrialInjuryEnterprise',
        '离职时间	': 'leaveDate',
        '医疗企业	': 'medicalEnterprise',
        '医疗企业基数	': 'medicalEnterpriseBase',
        '医疗个人	': 'medicalIndividual',
        '医疗个人基数	': 'medicalPersonalBase',
        '医疗个人比例	': 'medicalPersonalRatio',
        '手机号	': 'mobile',
        '养老个人	': 'oldAgeIndividual',
        '开户行	': 'openingBank',
        '参保城市	': 'participatingInTheCity',
        '养老企业	': 'pensionEnterprise',
        '养老企业基数	': 'pensionEnterpriseBase',
        '失业个人比例	': 'percentageOfUnemployedIndividuals',
        '大病个人基数	': 'personalBaseOfSeriousIllness',
        '养老个人基数	': 'personalPensionBase',
        '养老个人比例	': 'personalPensionRatio',
        '大病个人比例	': 'personalProportionOfSeriousIllness',
        '公积金个人比例	': 'personalRatioOfProvidentFund',
        '生育企业比例	': 'proportionOfFertilityEnterprises',
        '工伤企业比例	': 'proportionOfIndustrialInjuryEnterprises',
        '医疗企业比例	': 'proportionOfMedicalEnterprises',
        '养老企业比例	': 'proportionOfPensionEnterprises',
        '公积金企业比例	': 'proportionOfProvidentFundEnterprises',
        '企业id	': 'proportionOfSeriouslyIllEnterprises',
        '失业企业比例	': 'proportionOfUnemployedEnterprises',
        '公积金账号	': 'providentFundAccount',
        '公积金基数	': 'providentFundBase',
        '公积金城市	': 'providentFundCity',
        '公积金企业	': 'providentFundEnterprises',
        '公积金个人	': 'providentFundIndividual',
        '公积金月份	': 'providentFundMonth',
        '公积金备注	': 'providentFundNotes',
        '社保合计	': 'socialSecurity',
        '社保基数	': 'socialSecurityBase',
        '社保电脑号	': 'socialSecurityComputerNumber',
        '社保企业	': 'socialSecurityEnterprise',
        '社保个人	': 'socialSecurityIndividual',
        '社保月份	': 'socialSecurityMonth',
        '社保备注		': 'socialSecurityNotes',
        '学历	': 'theHighestDegreeOfEducation',
        '失业个人基数		': 'theNumberOfUnemployedIndividuals',
        '入职时间	': 'timeOfEntry',
        '公积金合计': 'totalProvidentFund',
        '二级部门	': 'twoLevelDepartment',
        '失业企业		': 'unemployedEnterprise',
        '失业个人		': 'unemployedIndividual',
        '失业企业基数		': 'unemploymentEnterpriseBase',
        '用户id	': 'userId',
        '姓名': 'username',
        '工作城市	': 'workingCity',
        '年月': 'yearsMonth'
      }

      // 改造数据
      const SocialData = res.map(Social => {
        return this.object2Arrayy(Social, dict)
      })

      // 导出配置
      export_json_to_excel({
        header: Object.keys(dict),
        data: SocialData
      })
    },
    // 对象转数组
    object2Arrayy(social, dict) {
      const newSocial = []
      for (const key in dict) {
        const enkey = dict[key]
        const value = social[enkey]

        newSocial.push(value)
      }

      return newSocial
    }
  }
}
</script>

<style>

</style>
